<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数游戏</title>
    <script src="./jquery-3.7.1.min.js"></script>
</head>
<body>
    <button id="button2">重新开始一局游戏</button><br/>
    <span>请输入要猜的数字：</span> <input type="text" id="guessNum"> <button id="button1">猜</button><br/>
    <span>已经猜的次数：</span> <span id="count">0</span><br/>
    <span>结果：</span><span id="result"></span>

    <script>
        //生成一个1-100的随机数
        let num = Math.floor(Math.random()*100) + 1;
        console.log(num);
        let count = 0;

        $("#button1").click(function () {
            count ++;
            $("#count").text(count)

            //获取用户输入的值
            let guessNum = $("#guessNum").val();

            if(guessNum > num){
                $("#result").text("猜大了")
                $("#result").css("color","red")
            }else if(guessNum < num){
                $("#result").text("猜小了")
                $("#result").css("color","red")
            }else if(guessNum == num){
                $("#result").text("猜对了")
                $("#result").css("color", "green")
            }else{
                 $("#result").text("请输入数字")
                 $("#result").css("color","yellow")
            }
        })
        $("#button2").click(function () {
            num = Math.floor(Math.random()*100) + 1;
            console.log(num);

            count = 0;
            $("#count").text(0)
            $("#guessNum").val("")
            $("#result").text("")
        })
    </script>
</body>
</html>